import { EventState } from "babylonjs";
import { AdvancedDynamicTexture, Checkbox, Control, StackPanel } from "babylonjs-gui";

export default class GBGUI {
  adt: AdvancedDynamicTexture;
  panel: StackPanel;

  constructor() {
    this.adt = AdvancedDynamicTexture.CreateFullscreenUI('UI');
    this.panel = new StackPanel('panel');

    this.adt.addControl(this.panel);
  }

  setPanelPosition() {
    this.panel.isVertical = true;
    this.panel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
    this.panel.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
  }

  addCheckbox(text: string, change: (eventData: boolean, eventState: EventState) => void) {
    const check = new Checkbox('');
    check.width = '20px';
    check.height = '20px';
    check.color = '#0088ff';
    check.isChecked = false;

    check.onIsCheckedChangedObservable.add(change);

    const header = Control.AddHeader(check, text, '180px', {isHorizontal: true, controlFirst: true})
    // header.height = '20%';
    header.height = '30px';
    header.color = 'white';
    header.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
    // header.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;

    this.panel.addControl(header);
  }
}